<script setup lang="ts">
  import type { fileItem } from '@/types/files'
  import { ref, onMounted } from 'vue'
  // 定义 props 接收
  defineProps<{
    list : fileItem[]
  }>()
  const activeIndex = ref(0)
  // 当 swiper 下标发生变化时触发
  const onChange : UniHelper.SwiperOnChange = (ev) => {
    activeIndex.value = ev.detail.current
  }
  const swiperRef = ref(null)
  const total = ref(0)
  //上一张
  // const prev = () => {
  //   console.log(swiperRef)
  //   swiperRef.value?.prev();
  // }
  // //下一张
  // const next = () => {
  //   swiperRef.value?.next()
  // }

  // 切换到上一张
  const prev = () => {
    if (activeIndex.value > 0) {
      activeIndex.value--;
    }
  };

  // 切换到下一张
  const next = (total) => {
    if (activeIndex.value < total - 1) {
      activeIndex.value++;
    }
  };
  onMounted(() => {

  })
</script>

<template>
  <view class="container">
    <swiper :current="activeIndex" ref="swiperRef" :circular="true" :autoplay="false" :interval="3000"
      @change="onChange">
      <swiper-item v-for="item in list" :key="item.fileId">
        <navigator hover-class="none" class="navigator">
          <image mode="aspectFill" class="image" :src="item.url" alt="Center Cropped Image"></image>
          <!-- <image mode="aspectFill" src="/static/index/image_video_cover.png"></image> -->
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 数字 指示器 -->

    <view class="number-indicator">
      <image class="arrow" src="../../static/images/icon_left_arrow.png" @click="prev"></image>
      <text class="current">{{ activeIndex + 1 }}</text>
      <text class="slash">/</text>
      <text class="total">{{ list.length }}</text>
      <image class="arrow" src="../../static/images/icon_right_arrow.png" @click="next(list.length)"></image>
    </view>
  </view>
</template>

<style lang="scss">
  /* 轮播图 */
  .container {
    height: 500rpx;
    position: relative;
    overflow: hidden;
    border-radius: 12rpx;
    transform: translateY(0);
    background-color: #efefef;

    object-fit: cover;
    /* 关键：居中裁剪 */
    object-position: center;
    /* 可选：确保从中心裁剪 */



    .navigator,
    .image {
      width: 100%;
      height: 100%;
    }
  }

  .number-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #999;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 100rpx;
    padding: 12rpx 24rpx;

    position: absolute;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .current {
    color: #fff;
    font-size: 24rpx;
    font-weight: bold;
  }

  .total {
    font-size: 24rpx;
    color: #fff;
  }

  .slash {
    color: white;
    margin: 0 10rpx;
  }

  .arrow {
    margin: 0rpx 30rpx;
    height: 30rpx;
    width: 30rpx;
  }
</style>
